<template>
  <div class="app-container home">
    <h1 style="color: #303133;">数据概况</h1>
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="user" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              投手数
            </div>
            <count-to :start-val="0" :end-val="item.userNum" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="message" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              工单数
            </div>
            <count-to :start-val="0" :end-val="item.workNum" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="chart" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              域名数
            </div>
            <count-to :start-val="0" :end-val="item.realmNum" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="drag" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              落地页数
            </div>
            <count-to :start-val="0" :end-val="item.floorNum" :duration="2600" class="card-panel-num" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <span style="font-size: 1.5em;">域名工单统计</span>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        切换域名：<el-select v-model="url" placeholder="请选择域名地址" clearable>
                  <el-option v-for="dict in realms" :key="dict.id" :label="dict.url" :value="dict.url"/>
                </el-select>
      </el-col>
    </el-row>
    <div style="height: 50px;"></div>
    <el-row>
      <el-col :span="14" class="table-box" style="box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);">
        <el-table :data="works">
          <el-table-column label="ID" align="center" prop="id" />
          <el-table-column label="Countries" align="center" prop="countries" width="120"/>
          <el-table-column label="平台" align="center" prop="plat">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.pl_info" :value="scope.row.plat"/>
            </template>
          </el-table-column>
          <el-table-column label="落地页数" align="center" prop="floorNum" />
          <el-table-column label="对应投手" align="center" prop="sysUser.nickName" />
          <el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="200" fixed="right">
            <template slot-scope="scope">
              <el-button icon="el-icon-s-data" :type="current === scope.row.id ? 'danger' : 'info'" @click="setIdom(scope.row)" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getWorks"
        />
      </el-col>
      <el-col :span="10" class="tom-box">
        <div style="height: 50%; box-sizing: border-box; padding-bottom: 20px;" id="ac-day"></div>
        <div style="height: 50%; box-sizing: border-box; padding-top: 20px;" id="ac-month"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { groupList ,getRealmList,workList,accessOfDay,accessOfMonth} from "@/api/app/census";
import * as echarts from 'echarts'
export default {
  name: "Index",
  dicts: ['gd_status', 'aud_status', 'pl_info', 'aqy_status'],
  components:{
    CountTo
  },  
  data() {
    return {
      // 版本号
      version: "3.8.7",
      item:{},
      realms:[],
      url:"",
      works:[],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total:0,
      current:null,
    };
  },
  mounted(){
    this.getItem();
    this.getRealm();
    this.getWorks();
  },
  methods: {
    //数据概括
    getItem(){
      groupList().then(res=>{
        this.item = res.data;
      })
    },
    //域名列表
    getRealm(){
      getRealmList().then(res=>{
        this.realms = res.data.list;
        this.url = res.data.url;
      })
    },
    //投手对应工单列表（超管看全部）
    getWorks(){
      workList(this.queryParams).then(res=>{
        this.works = res.rows;
        this.total = res.total;
        if(res.total > 0){
          this.current = res.rows[0].id;
          this.getDaySJ();
          this.getMonthSJ();
        }
      })
    },
    setIdom(row){
      this.current = row.id;
      this.getDaySJ();
      this.getMonthSJ();
    },
    getDaySJ(){
      accessOfDay(this.current).then(res=>{
        var myChart = echarts.init(document.getElementById('ac-day'));
        var option = {
          title: {
            text: '当天点击折线图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['点击数', '有效点击数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.data.x
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '点击数',
              type: 'line',
              stack: 'Total',
              data: res.data.y1
            },
            {
              name: '有效点击数',
              type: 'line',
              stack: 'Total',
              data: res.data.y2
            },
          ]
        };
        myChart.setOption(option);
      })
    },
    getMonthSJ(){
      accessOfMonth(this.current).then(res=>{
        var myChart2 = echarts.init(document.getElementById('ac-month'));
        var option = {
          title: {
            text: '本月点击折线图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['点击数', '有效点击数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.data.x
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '点击数',
              type: 'line',
              stack: 'Total',
              data: res.data.y1
            },
            {
              name: '有效点击数',
              type: 'line',
              stack: 'Total',
              data: res.data.y2
            },
          ]
        };
        myChart2.setOption(option);
      })
    }
  }
};
</script>

<style scoped lang="scss">
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
.tom-box{
  box-sizing: border-box;
  padding: 20px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  height: 720px;
}
.table-box{
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  box-sizing: border-box;
  padding: 20px;
  height: 720px;
}
</style>

